<template>
  <div class="supplier">
    <div>
      <el-button slot="content" class="btn" size="mini" type="primary" @click="submit">{{ $t('btn.save') }}</el-button>
    </div>
    <div class="organization">
      <el-form ref="nameRef" label-width="100px" size="mini" :model="headerInfo" :rules="headRules" class="suppLXR">
        <el-form-item
          :label="$t('market.suppliername')"
          prop="fname"
          label-width="120px"
        >
          <el-input v-model.trim="headerInfo.fname" class="input-width" placeholder="请输入供应商名称" />
        </el-form-item>
        <el-form-item :label="$t('market.short')" prop="fcode">
          <el-input v-model.trim="headerInfo.fshortname" class="input-width" placeholder="请输入供应商简称" />
        </el-form-item>
      </el-form>
    </div>
    <div>
      <span class="title-background">{{ $t('market.info') }}</span>
      <div class="basic-information">
        <!--地址-->
        <el-form ref="basicRef" label-width="100px" size="mini" :rules="basicRules" :model="baseInfo" class="spacing">
          <el-form-item :label="$t('market.country')" prop="fcountry">
            <el-input v-model.trim="baseInfo.fcountryname" class="input-width" placeholder="请选择国家" @focus="openCountry=true">
              <i slot="suffix" class="el-input__icon el-icon-search" @click="openCountry=true" />
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('market.supplieraddress')" prop="faddress">
            <el-input v-model.trim="baseInfo.faddress" class="input-width input-width1" placeholder="请输入通讯地址" type="textarea">
              <i slot="suffix" class="el-input__icon el-icon-search" />
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('market.fzip')" prop="fzip">
            <el-input v-model.trim="baseInfo.fzip" class="input-width" placeholder="请输入邮政编码" />
          </el-form-item>
          <el-form-item :label="$t('market.supplierWebsite')" prop="fwebsite">
            <el-input v-model.trim="baseInfo.fwebsite" class="input-width input-width1" placeholder="请输入公司网站" type="textarea">
              <i slot="suffix" class="el-input__icon el-icon-search" />
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('market.companyDescrip')" prop="fdescription">
            <el-input v-model.trim="baseInfo.fdescription" class="input-width input-width1" placeholder="请输入公司描述" type="textarea">
              <i slot="suffix" class="el-input__icon el-icon-search" />
            </el-input>
          </el-form-item>
        </el-form>
        <!--          注册-->
        <el-form ref="customerRef" label-width="140px" size="mini" :model="baseInfo" class="spacing">
          <el-form-item :label="$t('market.trade')" prop="ftradestring">
            <el-input v-model.trim="baseInfo.ftradestring" class="input-width" placeholder="请输入行业" />
          </el-form-item>
          <el-form-item :label="$t('market.ffounddate')" prop="ffounddate">
            <el-date-picker
              v-model.trim="baseInfo.ffounddate"
              class="input-width"
              type="date"
              value-format="yyyy-MM-dd"
              size="mini"
            />
          </el-form-item>
          <el-form-item :label="$t('market.legalperson')" prop="flegalperson">
            <el-input v-model.trim="baseInfo.flegalperson" class="input-width" />
          </el-form-item>
          <el-form-item :label="$t('market.registerfund')" prop="fregisterfund">
            <el-input-number v-model.trim="baseInfo.fregisterfund" class="input-width" controls-position="right" :min="0.00" />
          </el-form-item>
          <el-form-item :label="$t('market.tendpermit')" prop="ftendpermit">
            <el-input v-model.trim="baseInfo.ftendpermit" class="input-width" />
          </el-form-item>
          <el-form-item :label="$t('market.socialcrecode')" prop="fsocialcrecode">
            <el-input v-model.trim="baseInfo.fsocialcrecode" class="input-width" />
          </el-form-item>
          <el-form-item :label="$t('market.registeraddress')" prop="fregisteraddress">
            <el-input v-model.trim="baseInfo.fregisteraddress" class="input-width input-width1" type="textarea" />
          </el-form-item>
        </el-form>
        <!--管理-->
        <el-form ref="baseRef" label-width="100px" size="mini" :rules="baseRules" :model="baseInfo" class="spacing">
          <el-form-item :label="$t('market.supplyclassify')" prop="fsupplyclassify">
            <el-autocomplete
              v-model.trim="baseInfo.fsupplyclassifyName"
              highlight-first-item
              popper-class="my-autocomplete"
              :fetch-suggestions="querySearch18"
              class="input-width"
              :popper-append-to-body="false"
              @focus="getBasicUnit('SX_SUPPLYCLASSIFY')"
              @select="selUnit"
            >
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="cliUnit('SX_SUPPLYCLASSIFY')"
              />
              <template slot-scope="{ item }">
                <div class="name">{{ item.fname }}</div>
              </template>
            </el-autocomplete>
          </el-form-item>
          <el-form-item
            :label="$t('market.primaryGroup')"
            prop="fprimarygroup"
          >
            <el-input v-model.trim="baseInfo.fprimarygroupName" class="input-width">
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="groupVisiblit=true"
              />
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('market.supplierclassify')" prop="fsupplierclassify">
            <el-input v-model.trim="baseInfo.fsupplierclassify" class="input-width" />
          </el-form-item>
          <el-form-item :label="$t('market.companyclassify')" prop="fcompanyclassify">
            <el-autocomplete
              v-model.trim="baseInfo.fcompanyclassifyName"
              highlight-first-item
              popper-class="my-autocomplete"
              :fetch-suggestions="querySearch18"
              class="input-width"
              :popper-append-to-body="false"
              @focus="getBasicUnit('SX_COMPANYTYPE')"
              @select="selUnit"
            >
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="cliUnit('SX_COMPANYTYPE')"
              />
              <template slot-scope="{ item }">
                <div class="name">{{ item.fname }}</div>
              </template>
            </el-autocomplete>
          </el-form-item>
          <el-form-item :label="$t('market.companynature')" prop="fcompanynature">
            <el-autocomplete
              v-model.trim="baseInfo.fcompanynatureName"
              highlight-first-item
              popper-class="my-autocomplete"
              :fetch-suggestions="querySearch18"
              class="input-width"
              :popper-append-to-body="false"
              @focus="getBasicUnit('SX_COMPANYNATURE')"
              @select="selUnit"
            >
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="cliUnit('SX_COMPANYNATURE')"
              />
              <template slot-scope="{ item }">
                <div class="name">{{ item.fname }}</div>
              </template>
            </el-autocomplete>
          </el-form-item>
          <el-form-item :label="$t('market.supplierscale')" prop="fcompanyscale">
            <el-autocomplete
              v-model.trim="baseInfo.fcompanyscaleName"
              highlight-first-item
              popper-class="my-autocomplete"
              :fetch-suggestions="querySearch18"
              class="input-width"
              :popper-append-to-body="false"
              @focus="getBasicUnit('SX_COMPANYSCALE')"
              @select="selUnit"
            >
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="cliUnit('SX_COMPANYSCALE')"
              />
              <template slot-scope="{ item }">
                <div class="name">{{ item.fname }}</div>
              </template>
            </el-autocomplete>
          </el-form-item>
          <!--          <el-form-item label="对应组织" prop="fcorrespondorgid">-->
          <!--            <el-select v-model="baseInfo.fcorrespondorgid" class="input-width">-->
          <!--              <el-option-->
          <!--                v-for="option in teamList"-->
          <!--                :key="option.fid"-->
          <!--                :label="option.fname"-->
          <!--                :value="option.fid"-->
          <!--              />-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->
          <el-form-item :label="$t('market.corrCust')" prop="fcustid">
            <el-input
              v-model="baseInfo.fcust"
              class="input-width"
            >
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="clientVisiblit=true"
              />
            </el-input>
          </el-form-item>
        </el-form>
        <div class="positRe">
          <span>{{ $t('market.businessLicense') }}</span>
          <el-upload
            class="avatar-uploader"
            action="actionURL"
            :show-file-list="false"
            :auto-upload="false"
            :on-change="examine1"
          >
            <el-image
              v-if="baseInfo.fimg"
              :src="baseInfo.fimg"
              :preview-src-list="[baseInfo.fimg]"
              class="avatar"
              z-index="9999"
            />
            <div v-if="baseInfo.fimg" class="magnify">
              <i class="el-icon-search" @click.stop="proviewImg(baseInfo.fimg)" />
              <i class="el-icon-delete" @click.stop="baseInfo.fimg=''" />
            </div>
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </div>
      </div>
      <span class="title-background">{{ $t('market.linkman') }}</span>
      <el-form ref="callRef" label-width="120px" size="mini" :model="contactInfo" :rules="callRules" class="suppLXR">
        <el-form-item :label="$t('market.linkman')" prop="fcontact">
          <el-input v-model.trim="contactInfo.fcontact" class="input-width" />
        </el-form-item>
        <el-form-item :label="$t('market.contacttel')" prop="fcontacttel">
          <el-input v-model.trim="contactInfo.fcontacttel" class="input-width" />
        </el-form-item>
        <el-form-item :label="$t('market.contactemail')" prop="fcontactemail">
          <el-input v-model.trim="contactInfo.fcontactemail" class="input-width" />
        </el-form-item>
      </el-form>
      <span class="title-background">{{ $t('market.businessInfo') }}</span>
      <el-form ref="businessRef" label-width="120px" size="mini" :model="businessInfo" class="suppLXR">
        <el-form-item :label="$t('market.pricelist')" prop="fpricelistid">
          <el-input v-model.trim="businessInfo.fpricelist" class="input-width">
            <i
              slot="suffix"
              class="el-input__icon el-icon-search"
              @click="priceVisle=true"
            />
          </el-input>
        </el-form-item>
      </el-form>
      <span class="title-background">{{ $t('market.fince') }}</span>
      <jc-finance ref="fince" :finance-info.sync="financeInfo" :table-bank-data.sync="bankList" />
    </div>
    <!--    国家-->
    <country v-if="openCountry" @country="country" />
    <!--  价目表  -->
    <responsible v-if="priceVisle" @respon="priceList" />
    <!--  数据字典弹窗  -->
    <unit v-if="unitVisabled" :msg="funit" @unit="selUnit" />
    <!--  供应商分组  -->
    <el-dialog
      v-dialogDrag
      :title="$t('market.purchasecheck')"
      model
      :visible.sync="groupVisiblit"
      :close-on-click-modal="false"
      width="400px"
      destroy-on-close
    >
      <el-tree :data="supplierGroup" :props="defaultProps" @node-click="handleNodeClick" />
    </el-dialog>
    <!--营业执照-->
    <el-dialog
      v-dialogDrag
      :title="$t('market.preview')"
      model
      :visible.sync="imgVisible"
      append-to-body
      top="10vh"
      width="60%"
    >
      <el-image :src="priview" :preview-src-list="[priview]" style="max-width: 800px;height: auto" />
    </el-dialog>
    <!--客户列表-->
    <client v-if="clientVisiblit" @client="clientData" />
  </div>
</template>

<script>
import JcFinance from '@/views/purchasing/supplier/createSupplier/components/finance'
import responsible from '@/views/purchasing/supplier/createSupplier/components/responsible'
import {
  insertSupplierDetail,
  querySupplierGroup
} from '@/api/purchaseManagement/supplier'
import autocomplete from '@/views/market/marketManage/createMarkerOrder/components/autocomplete'
import mixinsImg from '@/views/market/marketManage/createMarkerOrder/components/mixinsImg'
import bility from '@/mixin/Operability'

export default {
  name: 'CreateSupplier',
  components: {
    JcFinance,
    responsible,
    client: () => import('@/views/market/marketManage/createMarkerOrder/components/client'),
    country: () => import('@/views/purchasing/supplier/createSupplier/components/country'),
    unit: () => import('@/views/basic/createMateriel2/components/unit')
  },
  mixins: [autocomplete, mixinsImg, bility],
  props: {
    tree: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      imgVisible: false,
      clientVisiblit: false,
      priview: '',
      funit: '',
      unitVisabled: false,
      groupVisiblit: false, // 供应商分组
      activeName: 'customer', // 默认基本信息
      treeClickCount: 0,
      // 头部信息
      headerInfo: {
        fname: '', // 客户名称
        fshortname: '' // 客户编码
      },
      // 基础数据
      baseInfo: {
        fimg: '',
        fcountry: '', // 国家id
        fcountryname: '', // 国家名称
        faddress: '', // 供应商地址
        fzip: '', // 邮政编码
        fwebsite: '', // 供应商网站
        fdescription: '', // 公司描述
        // 基本信息 - 注册
        ftradestring: '', // 行业
        flegalperson: '', // 法人
        fregisterfund: 0, // 注册资金
        fregisteraddress: '', // 注册地址
        ffounddate: '', // 创立日期
        ftendpermit: '', // 生产经营许可证
        fsocialcrecode: '', // 统一社会信用代码
        // 管理
        fcompanynature: '', // 公司性质(默认: 民营)
        fcompanyclassify: '', // 类别(默认: 制造)
        fprimarygroup: '', // 供应商分组
        fprimarygroupName: '', // 供应商分组
        fsupplyclassify: '', // 供应类别
        fsupplyclassifyName: '',
        fcompanyscale: '', //
        fcorrespondorgid: '', //
        fsupplierclassify: '' // 供应商分类
      },
      // 联系人
      contactInfo: {
        fcontact: '', // 联系人
        fcontacttel: '', // 公司电话
        fcontactemail: '' // 联系人邮箱
      },
      // 商务信息
      businessInfo: {
        fpriceliststring: ''
      },
      // 财务
      financeInfo: {
        fpaymenttype: '', // 结算方式
        fpaymenttypename: '', // 结算方式
        ftendtype: '', // 经营类型
        ftaxrateid: '', // 默认税率
        ftaxratename: '', // 默认税率
        fpayadvanceamount: '', // 单次付款额度
        ftaxregistercode: '', // 税务登记号
        fpaycondition: '', // 付款条件
        fpayconditionname: '', // 付款条件
        fpaycurrencyid: '', // 结算币别ID
        fpaycurrencyname: '',
        ftaxtype: '', // 税分类
        financefdescription: '', // 描述
        finvoicetype: '' // 发票类型
      },
      // 银行
      bankList: [
        {
          fcountrystring: '', // 开户行国家
          fbankcode: '', // 银行账号
          fcurrencyid: '', // 币别id
          fpaycurrencyname: '', // 币别
          fbankholder: '' // 账户名称
        }
      ],
      openCountry: false, // 国家
      priceVisle: false, // 国家
      total: 0, // 总条目
      supplierGroup: [], // 供应商分组
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      headRules: {
        fname: [{ required: true, message: '请输入供应商名称', trigger: 'blur' }]
      },
      basicRules: {
        fcountry: [{ required: true, message: '请选择国家', trigger: 'change' }]
      },
      baseRules: {
        fstaffid: [{ required: true, message: '请选择负责人', trigger: 'change' }],
        fsupplyclassify: [{ required: true, message: '请选择供应类别', trigger: 'change' }],
        fprimarygroup: [{ required: true, message: '请选择供应商分组', trigger: 'change' }],
        fcompanyclassify: [{ required: true, message: '请输入公司类别', trigger: 'change' }],
        fcompanynature: [{ required: true, message: '请选择公司性质', trigger: 'change' }],
        fcompanyscale: [{ required: true, message: '请选择公司规模', trigger: 'change' }]
      },
      callRules: {
        fcontact: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
        fcontacttel: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
        fcontactemail: [{ required: true, message: '请输入联系邮箱', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.querySupplier()
  },
  methods: {
    // 提交
    submit() {
      const p1 = new Promise((resolve, reject) => {
        this.$refs.nameRef.validate(valid => {
          if (valid) resolve()
        })
      })
      const p2 = new Promise((resolve, reject) => {
        this.$refs.basicRef.validate(valid => {
          if (valid) resolve()
        })
      })
      const p4 = new Promise((resolve, reject) => {
        this.$refs.baseRef.validate(valid => {
          if (valid) resolve()
        })
      })
      const p5 = new Promise((resolve, reject) => {
        this.$refs.callRef.validate(valid => {
          if (valid) resolve()
        })
      })
      const p6 = new Promise((resolve, reject) => {
        this.$refs['fince'].$refs['financeInfo'].validate(valid => {
          if (valid) resolve()
        })
      })
      for (const index in this.bankList) {
        const item = this.bankList[index]
        if (item.fcountrystring === '' && item.fbankcode === '' && item.fcurrencyid === '' && item.fbankholder === '') {
          this.bankList.splice(index, 1)
        }
      }
      const DATA = {
        fdocumentStatus: 'A',
        ...this.headerInfo,
        ...this.baseInfo,
        ...this.contactInfo,
        ...this.businessInfo,
        ...this.financeInfo,
        supplierbankList: this.bankList
      }
      Promise.all([p1, p2, p4, p5, p6]).then(() => {
        insertSupplierDetail(DATA).then(res => {
          if (res.code !== 0) {
            this.$message({ showClose: true, message: res.message, type: 'success' })
          } else {
            // 关闭当前页面
            this.$store.dispatch('tagsView/guanbi', this.$route)
            // 跳转到修改页面
            this.$router.push({ path: `/editSupplier/${res.data}` })
            this.$message({ showClose: true, message: res.message, type: 'success' })
            // if (this.tree === 7) { // 在树形供应商维护中
            //   this.$emit('supId', res.data.fsupplierid)
            // }
            // 清空数据
            this.handReload()
          }
        })
      })
    },
    // 供应分组
    async querySupplier() {
      const { data: res } = await querySupplierGroup()
      this.supplierGroup = res
    },
    // 预览图片
    proviewImg(ev) {
      this.imgVisible = true
      this.priview = ev
    },
    // 国家
    country(ev) {
      if (ev.fcountry) {
        const basic = this.baseInfo
        basic.fcountryname = ev.fcountryname
        basic.fcountry = ev.fcountry
      }
      this.openCountry = false
    },
    // 默认价目表
    priceList(ev) {
      if (ev.fid) {
        const basic = this.businessInfo
        basic.fpricelist = ev.listName
        basic.fpricelistid = ev.fid
      }
      this.priceVisle = false
    },
    // 供应商分组
    handleNodeClick(data) {
      this.treeClickCount++
      if (this.treeClickCount >= 2) return
      this.timer = window.setTimeout(() => {
        if (this.treeClickCount === 1) {
          this.treeClickCount = 0
        } else if (this.treeClickCount > 1) {
          this.treeClickCount = 0
          this.baseInfo.fprimarygroupName = data.label
          this.baseInfo.fprimarygroup = data.value
          this.groupVisiblit = false
        }
      }, 300)
    },
    // 客户
    clientData(item) {
      if (item.fcustId) {
        this.baseInfo.fcustid = item.fcustId
        this.baseInfo.fcust = item.fname
      }
      this.clientVisiblit = false
    },
    // 数据字典弹窗
    cliUnit(ev) {
      this.funit = ev
      this.unitVisabled = true
    },
    // 数据字典选中
    selUnit(ev) {
      if (ev.fid) {
        if (this.funit === 'SX_COMPANYTYPE') { // 公司类型
          this.baseInfo.fcompanyclassifyName = ev.fname
          this.baseInfo.fcompanyclassify = ev.fid
        } else if (this.funit === 'SX_COMPANYNATURE') { // 公司性质
          this.baseInfo.fcompanynatureName = ev.fname
          this.baseInfo.fcompanynature = ev.fid
        } else if (this.funit === 'SX_COMPANYSCALE') { // 公司规模
          this.baseInfo.fcompanyscaleName = ev.fname
          this.baseInfo.fcompanyscale = ev.fid
        } else if (this.funit === 'SX_SUPPLYCLASSIFY') { // 供应商类别
          this.baseInfo.fsupplyclassifyName = ev.fname
          this.baseInfo.fsupplyclassify = ev.fid
        }
      }
      this.unitVisabled = false
    },
    // 清空数据
    handReload() {
      Object.keys(this.headerInfo).forEach(key => { this.headerInfo[key] = '' })
      Object.keys(this.baseInfo).forEach(key => { this.baseInfo[key] = '' })
      Object.keys(this.contactInfo).forEach(key => { this.contactInfo[key] = '' })
      Object.keys(this.businessInfo).forEach(key => { this.businessInfo[key] = '' })
      Object.keys(this.financeInfo).forEach(key => { this.financeInfo[key] = '' })
      this.bankList = [{
        fcountry: '', // 开户行国家
        fbankcode: '', // 银行账号
        fcurrencyId: '', // 币别id
        fcurrencyName: '', // 币别
        faccountName: '' // 账户名称
      }]
    }
  }
}
</script>

<style>
.el-dialog .el-dialog__body {
  text-align: center;
}
</style>
<style lang="scss" scoped>
//@import "src/styles/customer/inedx";
.header-card{
  margin-bottom: 10px;
}
.supplier{
  @include listBom;
  padding: 10px;
  .el-card::v-deep .el-card__body{
    padding: 10px 20px!important;
  }
  .basic-information{
    margin-top: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .el-form{
      width: 25%;
      min-width: 268px;
    }
  }
  .el-textarea::v-deep .el-textarea__inner {
    min-height: 70px !important;
  }
  .title-background {
    border-left: none;
  }
  .suppLXR{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 0!important;
  }
  .el-form-item{
    width: 33.3%;
    min-width: 238px;
    margin-bottom: 5px;
    .input-width{
      min-width: 138px!important;
    }
  }
  .positRe {
    position: relative;

    .avatar-uploader .el-upload {
      height: 150px;
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }

    .avatar-uploader-icon {
      font-size: 18px;
      color: #8c939d;
      height: 150px;
      width: 150px;
      line-height: 150px;
      text-align: center;
      border: 1px solid #aaa;
      border-radius: 6px;
      background: #eee;

      span {
        color: #409eff;
      }
    }

    .avatar {
      height: 150px;
      width: 150px;
      display: block;
      border-radius: 6px;
    }

    .avatar-uploader {
      height: 150px;
      width: 150px;
      transition: all 1s;
    }

    .avatar-uploader:hover .magnify {
      display: block;
    }

    .magnify {
      display: none;
      height: 150px;
      width: 150px;
      background-color: rgba(0, 0, 0, .4);
      position: absolute;
      top: 19px;
      line-height: 150px;
      border-radius: 6px;

      i {
        font-size: 24px;
        color: #fff;
        padding: 0 15px;
      }
    }
  }
}
</style>
